<template>
<div class="register">
  <el-form ref="registerForm" :model="registerForm"  class="el-form" :rules="rules">
    <label class="title" style="margin-bottom: .1rem">欢迎注册</label>
    <el-row style="margin-bottom: .9rem">
      <label>已有账号？</label>
      <el-button type="text" class="to-register" @click="toRegister()">立即登录</el-button>
    </el-row>
    <label class="register-label">您的姓名</label>
    <el-form-item class="marginTop" prop="name">
      <el-input class="input-style"   v-model="registerForm.name" type="text" auto-complete="off" placeholder="请输入您的姓名">
      </el-input>
    </el-form-item>
    <label class="register-label">手机号</label>
    <el-form-item class="marginTop" prop="phone">
      <el-input class="input-style"   v-model="registerForm.phone" type="text" auto-complete="off" placeholder="请输入手机号">
      </el-input>
    </el-form-item>
    <label class="register-label">密码</label>
    <el-form-item class="marginTop" prop="pwd">
      <el-input class="input-style"   v-model="registerForm.pwd" type="text" auto-complete="off" placeholder="请输入密码名称">
      </el-input>
    </el-form-item>
    <label class="register-label">获取验证码</label>
    <el-row :gutter="20">
      <el-col  :span="16">
        <el-form-item  class="marginTop" prop="code">
          <el-input   v-model="registerForm.code" type="text" auto-complete="off" placeholder="请输入验证码">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col  :span="8">
        <el-form-item  class="marginTop" >
          <el-button :disabled="codeTimeStyle" @click="getCode()">{{ codeName }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-button type="primary"  style="width: 100%;margin-top: 2rem" @click="submitForm('registerForm')">注册</el-button>
  </el-form>
</div>
</template>

<script>
var cThis = null
export default {
  name: 'RegisterNext',
  data () {
    return {
      registerForm: {
        name: '',
        phone: '',
        pwd: '',
        code: ''
      },
      codeTime: 60,
      codeTimeStyle: false,
      codeName: '获取验证码',
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式错误'
          }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入短信验证码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({path: '/MianPage'})
        } else {
          return false
        }
      })
    },
    toRegister () {
      this.$router.push({path: '/'})
    },
    getCode () {
      cThis = this
      setInterval(function () {
        if (cThis.codeTime <= 0) {
          cThis.codeName = '获取验证码'
          cThis.codeTimeStyle = false
          cThis.codeTime = 60
        } else {
          cThis.codeTime -= 1
          cThis.codeTimeStyle = true
          cThis.codeName = '(倒计时' + cThis.codeTime + 's)'
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/styles/common.scss';
.to-register{
  font-size: 62.5%;
}
.input-style /deep/ .el-input__inner{
  border: 0rem;
  border-radius: .2rem;
  background: #F7F7F7;
  padding: .7rem;
  color: #999999;
}
.register{
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-bg.png");
  background-size: cover;
  display: flex;
  justify-content: flex-end;
}
.el-form{
  padding:2rem;
  width:22rem;
  background: rgb(255, 255, 255);
  margin: 4rem 7rem;
  border-radius: .3em;
}

.title{
  font-size:3em;
  font-weight: bold;
  color: black;
}
.content{
  font-size:16em;
  font-weight: bold;
  color: black;
}

.marginTop{
  margin-top: .2rem;
}

.login-label{
  font-weight: bold;
  color: #333333;
  font-size: .9rem;
}
.el-button--primary {
  color: #fff;
  background-color: $color-main;
  border-color: $color-main;
}
.el-button--primary:active{
  background: $color-blue-press;
}
</style>
